<template>
	<div class="recommend">
		<div v-for="item in recommends">
			<a :href="item.link" class="recommend-item">
				<img :src="item.image" alt="">
				<span>{{item.title}}</span>
			</a>
		</div>
	</div>
</template>

<script>
		export default {
			name:'homeRecommendView',
			props:{
				recommends:{
					type:Array,
					default(){
						return []
					}
				}
			}
		}
</script>

<style>
	.recommend {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding-bottom: 0.8rem;
		width: 100vw;
	}
	.recommend .recommend-item {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}
	.recommend .recommend-item img{
		margin-top: 0.266666rem;
		width: 1.6rem;
		height: 1.6rem;
	}
	.recommend .recommend-item span {
		text-align: center;
		padding-top: 0.08rem;
		font-size: 0.426666rem;
	}
</style>
